<template>
    <div class="app-container">
        <!-- 讲师表单 -->
<!-- 条件查询 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline" >
  <el-form-item >
    <el-input  v-model="teacherQuery.name" placeholder="讲师名"></el-input>
  </el-form-item>
  <el-form-item >
    <el-select   v-model="teacherQuery.level" clearable placeholder="讲师头衔">
      <el-option value="1" label="高级讲师"></el-option>
      <el-option  value="2" label="首席讲师"></el-option>
    </el-select>
  </el-form-item>

  <!-- 时间 -->
    <el-form-item label="添加时间">
        <el-date-picker 
            v-model="teacherQuery.begin"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
        ></el-date-picker>
    </el-form-item>

    <el-form-item label="添加时间">
        <el-date-picker 
            v-model="teacherQuery.end"
            type="datetime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
        ></el-date-picker>
    </el-form-item>


  <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
    <el-button type="default" icon="el-icon-search" @click="restData()">清空</el-button>
  </el-form-item>
</el-form>


<!-- 表格 -->
 <el-table
    :data="list"
    style="width: 100%"
    border
    fit
    highlight-current-row>    
    <!-- 序号 -->
    <el-table-column prop="date" label="序号" width="70" align="center">
        <template slot-scope="scope">
        {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
    </el-table-column>
<!-- 名称 -->
    <el-table-column prop="name" label="名称" width="80" />
<!-- 头衔 -->
    <el-table-column  label="头衔" width="80" >
         <template slot-scope="scope">
             {{scope.row.level===1?'高级讲师':'首席讲师'}}
         </template>
    </el-table-column>
 <!-- 资历 -->
   <el-table-column prop="intro" label="资历" />

<!--添加时间  -->
    <el-table-column prop="gmtCreate" label="添加时间" width="160" />
<!--排序  -->
    <el-table-column prop="sort" label="排序" width="60" />

<!-- 修改删除 -->
     <el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
 

        <router-link :to="'/teacher/edit/'+scope.row.id">
        <el-button type="primary" size="mini" icon="el-icon-edit" plain
        @click="updateById(scope.row.id)">修改</el-button>
        </router-link>

        <el-button type="danger" size="mini" icon="el-icon-delete" plain
        @click="removeById(scope.row.id)">删除</el-button>
    

        </template>
     </el-table-column>
  </el-table>


<!--分页 标签  -->

<el-pagination
    background
    :current-page="page"
    :page-size="limit"
    layout="prev, pager, next,total,jumper"
    :total="total"
    style="padding: 30px 0; text-align: center;"
    @size-change="getList"
    @current-change="getList"
    />
 

    </div>
</template>


<script>
//引入调用teacher.js文件
import teacher from '@/api/edu/teacher'

export default {
    //写核心代码 main.js  封装好了 new vue
// data:{},
data(){ //定义变量和初始值
    return{
        list: null,

        page: 1,
        limit: 5,
        total: 0,
        teacherQuery: {}    
    }
},

created(){ //在页码渲染 之前执行 一般调用method

    this.getList()

},

methods:{ //创建具体的方法 调用 teacher.js
    getList(page=1){
        this.page=page
        // axios.post("").then().catch()
        teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
        .then(response =>{
           this.list= response.data.rows
           this.total=response.data.total
        
        })//请求成功
        .catch(error =>{
            
         })//请求失败
    },
    restData(){
        //清空查询条件
       this.teacherQuery={}
       //查询所有讲师数据
       this.getList()
    },  
    removeById(id){
        this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            teacher.delTeacherById(id).then(response =>{
                    
                //提示信息
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
                
                //回显信息
                this.getList()
            })
            
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
            });          
        });



        // teacher.removeById(id)
        // .then(response =>{//删除成功
            
        //     //提示
            
        //     //回到列表
        //     this.getList()
            
        // })
        // .catch(error =>{

        // })
           
    },
    
    


}

}
</script>